import { isObjectLike, isArray, cloneDeep, merge } from 'lodash'
import { initPublicConfig } from '../assets/public'

function commonRender(props) {
  const { config, target } = props
  let result = cloneDeep(target)
  if (isObjectLike(target)) {
    if (isArray(target)) {
      result = result.map((item) => merge({}, config, item))
    } else {
      result = merge({}, config, result)
    }
  } else {
    result = config
  }
  return result
}

function seriesRender(props) {
  let result = []
  const {
    target,
    chartTheme,
    originOption: { color }
  } = props
  const fillOption = (index) => ({
    type: 'radar',
    symbol: 'circle',
    symbolSize: index === 0 ? 6 : 0,
    lineStyle: {
      width: 2,
      color: color ? color[index] : chartTheme.seriesColor[index]
    },
    itemStyle: {
      normal: {
        color: color ? color[index] : chartTheme.seriesColor[index]
      }
    },
    areaStyle:
      index === 0
        /*eslint-disable*/
        ? {
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              {
                offset: 0,
                color: '#ffff00'
              },
              {
                offset: 1,
                color: '#ff0000'
              }
            ],
            global: false
          }
        }
        : null
  })
  if (isObjectLike(target)) {
    if (isArray(target)) {
      target.forEach((item, index) => {
        result.push(merge({}, fillOption(index), item))
      })
    } else {
      result = merge({}, fillOption(0), target)
    }
  }
  return result
}

function setRules({ theme, chartTheme }) {
  const publicConfig = initPublicConfig(theme)
  return {
    grid: {
      normal: {
        containLabel: true
      },
      render: commonRender
    },
    legend: {
      normal: {
        ...publicConfig.legend,
        top: 'bottom'
      },
      render: commonRender
    },
    radar: {
      normal: {
        symbolSize: 8,
        name: {
          nameGap: 6,
          align: 'center',
          textStyle: {
            fontSize: 12,
            color: theme.normalFontColor
          }
        },
        splitArea: {
          areaStyle: {
            color: chartTheme.splitAreaColor,
            opacity: 0.2
          }
        },
        axisLine: {
          lineStyle: {
            color: chartTheme.axisLineColor
          }
        },
        splitLine: {
          lineStyle: {
            color: chartTheme.splitLineColor
          }
        },
        radius: '60%'
      },
      render: commonRender
    },
    series: {
      render: seriesRender
    }
  }
}

function pullNewOptions({ option = {}, theme, chartTheme }) {
  const originOption = cloneDeep(option)
  const normalConfig = {
    color: chartTheme.seriesColor,
    tooltip: true,
    legend: true
  }
  const newOption = merge({}, normalConfig, originOption)
  const result = {}
  const rules = setRules({ data: newOption, theme, chartTheme })
  const keys = Object.keys(newOption)
  keys.forEach((key) => {
    const target = rules[key]
    if (newOption[key]) {
      result[key] = target
        ? target.render({
          config: target.normal, // 默认参数
          target: newOption[key], // 传入参数
          chartTheme,
          theme, //参数配置
          key,
          originOption: newOption // 全部参数
        })
        : newOption[key]
    }
  })
  return result
}

export default pullNewOptions
